<template>
  <div class="container">
    <div class="tabs-lb">
      <span>{{ nlxq.jkmc }}</span>
      <div>
        <el-button type="text" v-if="form.jkwd" @click="download">
          <i class="el-icon-download"></i>
          文档下载
        </el-button>
        <el-button v-if="spzt === '通过'" type="success" @click="zxts">
          <!-- <img src="~@/assets/img/grzx/zxts.png" alt /> -->
          服务验证
        </el-button>
      </div>
    </div>
    <el-tabs @tab-click="tabsClick" class="tabs-div">
      <el-tab-pane label="基础信息">
        <!-- 能力详情 -->
        <div class="nlxq">
          <div class="nl-sq" v-if="spzt !== '通过'">
            <img src="~@/assets/img/grzx/warning.png" alt />
            <span>
              你尚未获得该能力的授权
              <el-link type="primary" @click="fssq">立即申请</el-link>
            </span>
          </div>
          <div class="title">能力概述</div>
          <div class="content">{{ nlxq.jkms }}</div>
          <div style="clear: both"></div>
          <div class="title">请求说明</div>
          <div class="content">
            <span>请求方式: {{ nlxq.qqfs }}</span>
            <br />
            <span>请求URL: {{ baseUrl + nlxq.bldz }}</span>
            <br />
            <div>
              <img
                class="cursor"
                v-if="urlShow"
                @click="ShowClike('url')"
                src="~@/assets/img/grzx/箭头-上.png"
                alt
              />
              <img
                class="cursor"
                v-else
                @click="noneClike('url')"
                src="~@/assets/img/grzx/箭头-下.png"
                alt
              />
              <span class="ml10">请求参数(URL)</span>
            </div>
            <el-table v-if="urlShow" :data="urlData">
              <el-table-column property="cs" label="参数"></el-table-column>
              <el-table-column property="zh" label="值"></el-table-column>
            </el-table>
            <div>
              <img
                class="cursor"
                v-if="headerShow"
                @click="ShowClike('header')"
                src="~@/assets/img/grzx/箭头-上.png"
                alt
              />
              <img
                class="cursor"
                v-else
                @click="noneClike('header')"
                src="~@/assets/img/grzx/箭头-下.png"
                alt
              />
              <span class="ml10">请求参数(HEADER)</span>
            </div>
            <el-table v-if="headerShow" :data="headerData">
              <el-table-column property="cs" label="参数"></el-table-column>
              <el-table-column property="zh" label="值"></el-table-column>
            </el-table>
            <div>
              <img
                class="cursor"
                v-if="bodyShow"
                @click="ShowClike('body')"
                src="~@/assets/img/grzx/箭头-上.png"
                alt
              />
              <img
                class="cursor"
                v-else
                @click="noneClike('body')"
                src="~@/assets/img/grzx/箭头-下.png"
                alt
              />
              <span class="ml10">请求参数(BODY)</span>
            </div>
            <el-table v-if="bodyShow" :data="bodyData">
              <el-table-column property="cs" label="参数"></el-table-column>
              <el-table-column property="sfbx" label="是否必选">
                <template slot-scope="{ row }">
                  <span>{{ row.sfbx === 'Y' ? '是' : '否' }}</span>
                </template>
              </el-table-column>
              <el-table-column property="lx" label="类型"></el-table-column>
              <el-table-column property="mrz" label="默认值"></el-table-column>
              <el-table-column property="sm" label="说明"></el-table-column>
            </el-table>
            <div>
              <img
                class="cursor"
                v-if="codeShow"
                @click="ShowClike('code')"
                src="~@/assets/img/grzx/箭头-上.png"
                alt
              />
              <img
                class="cursor"
                v-else
                @click="noneClike('code')"
                src="~@/assets/img/grzx/箭头-下.png"
                alt
              />
              <span class="ml10">返回(CODE)</span>
            </div>
            <el-table v-if="codeShow" :data="fhCodeData">
              <el-table-column property="zh" label="值"></el-table-column>
              <el-table-column property="sfzwsbzt" label="是否作为失败状态">
                <template slot-scope="{ row }">
                  <span>{{ row.sfbx === 'Y' ? '是' : '否' }}</span>
                </template>
              </el-table-column>
              <el-table-column property="sm" label="说明"></el-table-column>
            </el-table>
            <div>
              <img
                class="cursor"
                v-if="backShow"
                @click="ShowClike('back')"
                src="~@/assets/img/grzx/箭头-上.png"
                alt
              />
              <img
                class="cursor"
                v-else
                @click="noneClike('back')"
                src="~@/assets/img/grzx/箭头-下.png"
                alt
              />
              <span class="ml10">返回参数:</span>
            </div>
            <el-table v-if="backShow" :data="fhData">
              <el-table-column property="cs" label="参数"></el-table-column>
              <!-- <el-table-column property="sfbx" label="是否必选">
                <template slot-scope="{ row }">
                  <span>{{ row.sfbx === 'Y' ? '是' : '否' }}</span>
                </template>
              </el-table-column>-->
              <el-table-column property="lx" label="类型"></el-table-column>
              <el-table-column property="sm" label="说明"></el-table-column>
            </el-table>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="应用参数">
        <div class="formStyle">
          <div class="form-box">
            <div class="box-right">访问协议</div>
            <div class="box-kinds">
              <el-radio-group v-model="form.qqxy" disabled>
                <el-radio label="HTTP">HTTP</el-radio>
                <el-radio label="HTTPS">HTTPS</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="form-box">
            <div class="box-right">请求方法</div>
            <div class="box-kinds">
              <el-radio-group v-model="form.qqfs" disabled>
                <el-radio label="POST">POST</el-radio>
                <el-radio label="GET">GET</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="form-border">
            <div class="border-title box-right">
              <img
                class="cursor"
                v-if="fwxylShow"
                @click="ShowClike('fwxy')"
                src="~@/assets/img/grzx/箭头-上.png"
                alt
              />
              <img
                class="cursor"
                v-else
                @click="noneClike('fwxy')"
                src="~@/assets/img/grzx/箭头-下.png"
                alt
              />
              <span class="ml10">服务路由</span>
            </div>
            <div v-if="fwxylShow" class="border-box">
              <div>
                <div style="line-height:30px" v-for="(item,index) in form.jkdz" :key="index">
                  <span>服务原始地址{{index+1}}: &nbsp; {{item}}</span>
                </div>
              </div>
              <div>
                <span>对外暴露API路径: &nbsp; {{form.bldz}}</span>
              </div>
            </div>
          </div>
          <div class="form-box">
            <div class="box-right">返回数据格式</div>
            <div class="box-kinds">
              <el-radio-group v-model="form.ffgs" disabled>
                <el-radio label="JSON">JSON</el-radio>
                <el-radio label="XML">XML</el-radio>
              </el-radio-group>
            </div>
          </div>
          <!-- <div class="form-box">
            <div class="box-right">是否启用服务路由</div>
            <div class="box-kinds">
              <el-radio-group v-model="form.sfqyfwly" disabled>
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false || null">否</el-radio>
              </el-radio-group>
            </div>
          </div>-->
          <div class="form-box">
            <div class="box-right">消息中间件</div>
            <div class="box-kinds">
              <el-radio-group v-model="form.xxzjj" disabled>
                <el-radio label="KAFKA">KAFKA</el-radio>
                <el-radio label="ROCKETMQ">ROCKETMQ</el-radio>
                <el-radio :label="null">无</el-radio>
              </el-radio-group>
            </div>
          </div>

          <div class="form-border">
            <div class="border-title box-right">
              <img
                class="cursor"
                v-if="llkzShow"
                @click="ShowClike('llkz')"
                src="~@/assets/img/grzx/箭头-上.png"
                alt
              />
              <img
                class="cursor"
                v-else
                @click="noneClike('llkz')"
                src="~@/assets/img/grzx/箭头-下.png"
                alt
              />
              <span class="ml10">流量控制</span>
            </div>
            <div v-if="llkzShow" class="border-box">
              <div>
                <span>每秒限流数: &nbsp; {{form.llkz.mmxl}}</span>
              </div>
              <div>
                <span>每分限流数: &nbsp; {{form.llkz.mfxl}}</span>
              </div>
              <div>
                <span>每小时限流数: &nbsp; {{form.llkz.mxsxl}}</span>
              </div>
              <div>
                <span>重试次数: &nbsp; {{form.llkz.cscs}}</span>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane v-if="isAdminShow" label="授权列表">
        <div class="formStyle">
          <el-table :data="warrantTableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
            <el-table-column prop="dyrymc" label="使用人" align="center"></el-table-column>
            <el-table-column prop="dydwmc" label="使用单位" align="center"></el-table-column>
            <el-table-column prop="yyxt" label="使用系统" align="center"></el-table-column>
            <el-table-column prop="zdycs" label="总调用(次)" width="110" align="center"></el-table-column>
            <el-table-column prop="jrdycs" label="今日调用(次)" width="120" align="center"></el-table-column>
            <el-table-column prop="syksrq" label="申请日期" align="center"></el-table-column>
            <el-table-column prop="syjsrq" label="到期日期" align="center"></el-table-column>
            <el-table-column prop="syzt" label="状态" width="110" align="center">
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.syzt === '使用中'">{{scope.row.syzt}}</el-tag>
                <el-tag type="info" v-if="scope.row.syzt === '未使用'">{{scope.row.syzt}}</el-tag>
                <el-tag type="danger" v-if="scope.row.syzt === '已停用'">{{scope.row.syzt}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <!-- :loading="startLoading" -->
                <el-link
                  v-if="scope.row.syzt !== '使用中'"
                  size="mini"
                  type="success"
                  @click="startClick(scope.row)"
                >启用</el-link>
                <!-- :loading="stopLoading" -->
                <el-link v-else size="mini" type="danger" @click="stopClick(scope.row)">停用</el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page">
          <el-pagination
            background
            @size-change="changePageSize"
            @current-change="changePageNum"
            :current-page="queryDataForm.pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="queryDataForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import dyglService from "@/api/dygl";
import jkglService from "@/api/jkgl";
// import { downloadFile } from '@/'

export default {
  data() {
    return {
      // 路由参数
      jkbh: "",
      // 当前能力订阅状态
      spzt: "",
      // 能力详情
      nlxq: {},
      urlData: [],
      headerData: [],
      bodyData: [],
      fhCodeData: [],
      fhData: [],
      baseUrl: window.BASEURL,
      form: {
        qqxy: '',
        qqfs: '',
        bldz: '',
        sfqyfwly: '',
        ffgs: '',
        xxzjj: '',
        llkz: '',
        zfgz: '',
        jkdz: '',
        bldz: '',
        mmxls: '',
        mfxls: '',
        mxsxls: '',
        cscs: ''
      },
      tableData: [],
      isAdminShow: false,
      queryDataForm: {
        filter: {
          jkbh: this.$route.query.cs
        },
        orderBy: "",
        pageNum: 1,
        pageSize: 20
      },
      warrantTableData: [],
      total: 0,
      // startloading: false,
      // stopLoading: false,
      urlShow: true,
      headerShow: true,
      bodyShow: true,
      codeShow: true,
      backShow: true,
      fwxylShow: true,
      llkzShow: true
    }
  },
  mounted() {
    //获取路由信息
    this.getRouter();
  },
  methods: {
    /* 获取路由信息 */
    getRouter() {
      if (this.$route.query.cs) {
        this.jkbh = this.$route.query.cs;
        // 判断是否已有当前能力
        this.getSqzt();
        // 获取能力详情
        this.getNlxq();
        // 判断是否是超管
        this.isAdmin();
        // 查询接口授权列表
      }
    },
    /*
     * 判断是否已有当前能力
     */
    getSqzt() {
      const params = {
        jkbh: this.jkbh,
      };
      dyglService
        .getNldyzt(params)
        .then((res) => {
          this.spzt = res.spzt;

        })
        .catch((err) => {
          !err.isError &&
            this.$message({ type: "warning", message: err.message });
        });
    },

    /*
     * 获取能力详情
     */
    getNlxq() {
      const params = {
        jkbh: this.jkbh,
      };
      jkglService
        .getJkdy(params)
        .then((res) => {
          this.nlxq = res;
          this.form = res;
          this.form.llkz = JSON.parse(res.llkz)
          this.form.jkdz = res.jkdz.split(",")
          // 解析table数据
          this.getTableData();
        })
        .catch((err) => {
          !err.isError &&
            this.$message({ type: "warning", message: err.message });
        });
    },

    /* 获取表格数据 */
    getTableData() {
      this.urlData = this.nlxq.urlcs ? JSON.parse(this.nlxq.urlcs) : []
      this.headerData = this.nlxq.headercs ? JSON.parse(this.nlxq.headercs) : []
      this.bodyData = this.nlxq.qqcs ? JSON.parse(this.nlxq.qqcs) : []
      this.fhCodeData = this.nlxq.fhmjh ? JSON.parse(this.nlxq.fhmjh) : []
      this.fhData = this.nlxq.fhcs ? JSON.parse(this.nlxq.fhcs) : []
    },
    /*
     * 发起申请（无权限）
     */
    fssq() {
      this.$router.push({
        path: "/nlsq",
        query: {
          cs: this.nlxq.jkbh,
        },
      });
    },

    /*
     * 服务验证
     */
    zxts() {
      this.$router.push({
        path: "/zxts",
        query: {
          cs: this.nlxq.jkbh
        }
      })
    },
    // 下载文件
    download() {
      window.open(window.BASEURL + "/fpi/wjfw/download?wjbh=" + this.form.jkwd);
    },
    // 判断管理员
    isAdmin() {
      if (this.$store.state.personInfo.rybm.indexOf('A000') >= 0) {
        dyglService.getPzdwbm().then(res => {
          if (this.$store.state.personInfo.dwbm === res) {
            this.isAdminShow = true;
          } else {
            this.isAdminShow = false;
          }
        })
      }
    },
    tabsClick(val) {
      if (val.label === '授权列表') {
        this.getWarrantData();
      }
    },
    getWarrantData() {
      const loading = this.$loading({
        lock: true,
        text: '数据加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      const params = this.queryDataForm
      dyglService.getqueryJksqlb(params).then(res => {
        this.warrantTableData = res.list
        this.total = res.total
        loading.close()
      }).catch(err => {
        !err.isError && this.$message({ type: 'warning', message: err.message })
      })
    },
    // 分页
    changePageSize(val) {
      this.queryDataForm.pageSize = val
      this.queryDataForm.pageNum = 1
      this.getWarrantData();
    },
    changePageNum(val) {
      this.queryDataForm.pageNum = val
      this.getWarrantData()
    },
    // 点击启用按钮
    startClick(row) {
      // this.startloading = true;
      let params = {
        jkbh: row.jkbh,
        dyrybm: row.dyrybm
      }
      dyglService.updateSyztqy(params).then(res => {
        this.$message({ type: 'success', message: '启用授权成功!' })
        this.changePageNum(1);
        // this.startloading = false;
      }).catch((err) => {
        // this.startloading = false;
        !err.isError && this.$message({ type: 'warning', message: err.message })
      })
    },
    stopClick(row) {
      // this.stopLoading = true;
      let params = {
        jkbh: row.jkbh,
        dyrybm: row.dyrybm
      }
      dyglService.updateSyztty(params).then(res => {
        this.$message({ type: 'success', message: '停用授权成功!' })
        this.changePageNum(1);
        // this.stopLoading = false;
      }).catch((err) => {
        // this.stopLoading = false;
        !err.isError && this.$message({ type: 'warning', message: err.message })
      })
    },
    ShowClike(data) {
      if (data === 'url') {
        this.urlShow = !this.urlShow;
        return
      }
      if (data === 'header') {
        this.headerShow = !this.headerShow;
        return
      }
      if (data === 'body') {
        this.bodyShow = !this.bodyShow;
        return
      }
      if (data === 'code') {
        this.codeShow = !this.codeShow;
        return
      }

      if (data === 'back') {
        this.backShow = !this.backShow;
        return
      }

      if (data === 'fwxy') {
        this.fwxylShow = !this.fwxylShow;
        return
      }

      if (data === 'llkz') {
        this.llkzShow = !this.llkzShow;
        return
      }

    },
    noneClike(data) {
      if (data === 'url') {
        this.urlShow = !this.urlShow;
      }
      if (data === 'header') {
        this.headerShow = !this.headerShow;
      }
      if (data === 'body') {
        this.bodyShow = !this.bodyShow;
        return
      }
      if (data === 'code') {
        this.codeShow = !this.codeShow;
        return
      }

      if (data === 'back') {
        this.backShow = !this.backShow;
        return
      }

      if (data === 'fwxy') {
        this.fwxylShow = !this.fwxylShow;
        return
      }

      if (data === 'llkz') {
        this.llkzShow = !this.llkzShow;
        return
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.tabs-div {
  background: #fff;
  margin-top: 15px;
}
.container {
  width: 100%;
  .nlxq {
    margin-top: 20px;
    width: 100%;
    padding: 30px 30px;
    background: #fff;
    // border: solid 1px #cecece;
    .title {
      font-size: 20px;
      font-weight: bold;
      color: #333;
    }
    .content {
      color: #666666;
      font-size: 14px;
      margin: 20px 0;
      span {
        line-height: 28px;
      }
    }
    .zxts {
      float: left;
    }
  }
  .nl-sq {
    width: 100%;
    height: 180px;
    border: 2px dashed #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 20px;
    font-size: 16px;
  }
}

.iptWidth {
  width: 50%;
}

.formStyle {
  margin: 20px 0 50px 0;
  background-color: #fff;
}
.page {
  text-align: center;
  padding-top: 10px;
}

::v-deep .el-tabs--top .el-tab-pane {
  overflow: hidden;
  padding-bottom: 10px;
}

.tabs-lb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-box {
  display: flex;
  align-items: center;
  padding: 20px 20px;
  font-size: 16px;
  .box-kinds {
    margin-left: 50px;
    ::v-deep .el-radio-group {
      display: flex;
      align-items: center;
    }
  }
}

.form-border {
  padding: 20px 20px;
  .border-title {
    margin-bottom: 20px;
  }
  .border-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    padding: 20px 0;
  }
}

.box-right {
  width: 130px;
  text-align: right;
}
</style>
